<template>
  <div class="main h100 flex-h flex-center">
    <div class="contain flex-v flex-center">
      <div class="logo">
        <el-image
          v-if="logo"
          :src="logo"
          fit="cover"
          @click="router.push('/')"
        />
      </div>
      <!-- <div class="header">{{ title }}</div> -->
      <div class="content">
        <div class="block">
          <el-input
            placeholder="账号"
            size="large"
            v-model="username"
            autocomplete="off"
            autofocus
            @keyup="handleKeyup"
          >
            <template #prefix>
              <el-icon>
                <UserFilled />
              </el-icon>
            </template>
          </el-input>
        </div>

        <div class="block">
          <el-input
            placeholder="密码"
            size="large"
            v-model="password"
            show-password
            autocomplete="off"
            @keyup="handleKeyup"
          >
            <template #prefix>
              <el-icon>
                <Lock />
              </el-icon>
            </template>
          </el-input>
        </div>

        <el-row class="btn-row">
          <el-button
            class="login-btn w100 liner-btn liner-btn-opacity"
            size="large"
            type="primary"
            @click="login"
            >登录</el-button
          >
        </el-row>
        <!-- <div class="opt flex-h flex-between">
          <span @click="router.push('/register')">注册</span>
          <span @click="showResetPass = true">重置密码</span>
        </div> -->

        <div v-if="wechatLoginURL !== ''">
          <el-divider class="divider">其他登录方式</el-divider>

          <div class="clogin">
            <a class="wechat-login" :href="wechatLoginURL"
              ><i class="iconfont icon-wechat"></i
            ></a>
          </div>
        </div>
      </div>
    </div>

    <reset-pass @hide="showResetPass = false" :show="showResetPass" />

    <footer-bar />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { Lock, UserFilled } from "@element-plus/icons-vue";
import { httpGet, httpPost } from "@/utils/http";
import { useRouter } from "vue-router";
import FooterBar from "@/components/FooterBar.vue";
import { isMobile } from "@/utils/libs";
import { checkSession, getLicenseInfo, getSystemInfo } from "@/store/cache";
import { setUserToken } from "@/store/session";
import ResetPass from "@/components/ResetPass.vue";
import { showMessageError } from "@/utils/dialog";

const router = useRouter();
const title = ref("Geek-AI");
const username = ref(import.meta.env.VITE_APP_USER);
const password = ref(import.meta.env.VITE_APP_PASS);
const showResetPass = ref(false);
const logo = ref("");
const licenseConfig = ref({});
const wechatLoginURL = ref("");

onMounted(() => {
  // 获取系统配置
  getSystemInfo()
    .then((res) => {
      logo.value = res.data.logo;
      title.value = res.data.title;
    })
    .catch((e) => {
      showMessageError("获取系统配置失败：" + e.message);
    });

  getLicenseInfo()
    .then((res) => {
      licenseConfig.value = res.data;
    })
    .catch((e) => {
      showMessageError("获取 License 配置：" + e.message);
    });

  checkSession()
    .then(() => {
      if (isMobile()) {
        router.push("/mobile");
      } else {
        router.push("/chat");
      }
    })
    .catch(() => {});

  const returnURL = `${location.protocol}//${location.host}/login/callback`;
  httpGet("/api/user/clogin?return_url=" + returnURL)
    .then((res) => {
      wechatLoginURL.value = res.data.url;
    })
    .catch((e) => {
      console.error(e);
    });
});

const handleKeyup = (e) => {
  if (e.key === "Enter") {
    login();
  }
};

const login = function () {
  if (username.value.trim() === "") {
    return showMessageError("请输入用户民");
  }
  if (password.value.trim() === "") {
    return showMessageError("请输入密码");
  }

  httpPost("/api/user/login", {
    username: username.value.trim(),
    password: password.value.trim(),
  })
    .then((res) => {
      setUserToken(res.data.token);
      if (isMobile()) {
        router.push("/mobile");
      } else {
        router.push("/chat");
      }
    })
    .catch((e) => {
      showMessageError("登录失败，" + e.message);
    });
};
</script>

<style lang="stylus" scoped>
@import "../assets/css/login.styl"
</style>
